<template>
  <div class="site-containner">
    <el-row :gutter="20" class="seachnav">
      <el-col :xs="9" :sm="8" :md="6" :lg="8" :xl="7">
        <span><router-link :to="{path:'/monitor/etl'}"><img :src="returnnormalpress" class="returnnormalpress"/></router-link></span>
        <span><img :src="realtimeindex" class="equiplist"/></span>
        <span class="description">ETL策略管理</span>
      </el-col>
    </el-row>
    <div class="app-container">
      <el-row>
        <el-col :span="24">
          <div class="outMores">
            <div class="dataTitles">
              TEL策略详情
            </div>
          </div>
          <div class="addBody">
            <el-form :inline="true" class="demo-form-inline">
              <div class="textTitle">基本信息</div>
            </el-form>
            <el-form :inline="true" class="addMessage" ref="form" :model="checkMessage" label-width="80px">
              <el-form-item label="策略编号:">
                <el-input class="readonlyMessage smallMessage" v-model="checkMessage.strategy_id" readonly></el-input>
              </el-form-item>
              <el-form-item class="rightMessage" label="策略名称:">
                <el-input class="readonlyMessage smallMessage" v-model="checkMessage.name" readonly></el-input>
              </el-form-item>
              <el-form-item label="适用对象:">
                <el-input class="readonlyMessage smallMessage" v-model="checkMessage.equip_model_label" readonly></el-input>
              </el-form-item>
              <el-form-item class="rightMessage" label="策略类型:">
                <el-input class="readonlyMessage smallMessage" v-model="checkMessage.strategy_type_label" readonly></el-input>
              </el-form-item>
              <el-form-item label="计算频率:">
                <el-input class="readonlyMessage smallMessage" v-model="checkMessage.compute_cycle_label" readonly></el-input>
              </el-form-item>
              <el-form-item class="rightMessage" label="生效时间:">
                <el-input class="readonlyMessage smallMessage" v-model="checkMessage.valid_start_time" readonly></el-input>
              </el-form-item>
              <el-form-item label="计算类型:">
                <el-input class="readonlyMessage bigMessage" v-model="checkMessage.data_type_label" readonly></el-input>
              </el-form-item>
              <el-form-item label="计算条件:" v-if="checkMessage.data_type === 'digit'">
                <el-input class="readonlyMessage smallMessage" v-model="checkMessage.digit_type_label" readonly></el-input>
              </el-form-item>
              <el-form-item class="rightMessage" label="条件值:" v-if="checkMessage.data_type === 'digit' && checkMessage.digit_val_label">
                <el-input class="readonlyMessage smallMessage" v-model="checkMessage.digit_val_label" readonly></el-input>
              </el-form-item>
              <el-form-item label="计算条件:" v-if="checkMessage.data_type === 'analog'">
                <el-input class="readonlyMessage smallMessage" v-model="checkMessage.analog_type_label" readonly></el-input>
              </el-form-item>
              <el-form-item class="rightMessage" label="条件值:" v-if="checkMessage.data_type === 'analog' && checkMessage.analog_val">
                <el-input class="readonlyMessage smallMessage" v-model="checkMessage.analog_val" readonly></el-input>
              </el-form-item>
              <el-form-item label="备注:">
                <el-input class="readonlyMessage coordinateMessage" v-model="checkMessage.remarks" readonly></el-input>
              </el-form-item>
            </el-form>
            <el-form :inline="true" class="demo-form-inline">
              <div class="textTitle">测点列表</div>
            </el-form>
            <el-table :data="ETLOid" stripe fit highlight-current-row max-height="375"
                      style="width: 100%;" :header-cell-style="{background:'#F7F8F9'}">
              <el-table-column
                type="index"
                align="center"
                label="序号"
                width="55px"
              >
              </el-table-column>
              <el-table-column
                prop="oid"
                label="测点编号"
                sortable
                min-width="300">
              </el-table-column>
              <el-table-column
                prop="name"
                label="测点名称"
                sortable
                min-width="300">
              </el-table-column>
              <el-table-column
                prop="type"
                label="测点类型"
                min-width="300">
              </el-table-column>
              <!--<el-table-column-->
                <!--label="操作"-->
                <!--width="120">-->
                <!--<template slot-scope="scope">-->
                  <!--<div class="delete">-->
                    <!--<el-button  type="text" class="" title="删除">-->
                      <!--<img :src="ETLDelete" alt="删除"/>-->
                    <!--</el-button>-->
                  <!--</div>-->
                <!--</template>-->
              <!--</el-table-column>-->
            </el-table>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
  import axios from 'axios'
  import ETLDelete from '@/assets/components/wraningDelete.png'
  import realtimeindex from '@/assets/home/management.png'
  import returnnormalpress from '@/assets/home/returnnormalpress.png'
  export default {
    name: 'AdminSite',
    components: {
    },
    data() {
      return {
        ETLDelete,
        realtimeindex,
        returnnormalpress,
        checkMessage: {},
        ETLOid: [],
        getOnceETL: {
          access_token: localStorage.getItem('access_token'),
          type: 'etl_get_condition',
          data: {
            condition: {
              strategy_id: '',
              strategy_ids: [],
              name: '',
              equip_class: '',
              equip_model: '',
              strategy_type: '',
              compute_cycle: '',
              data_type: '',
              analog_type: '',
              analog_val: '',
              digit_type: '',
              digit_val: '',
              event_level: [],
              oids: []
            },
            page: {
              page_size: '10',
              page_number: '1'
            }
          }
        }
      }
    },
    created() {
      this.queryData()
    },
    methods: {
      // 查看信息
      queryData() {
        this.getOnceETL.data.condition.strategy_id = this.$route.query.id
        axios.post('/etl', this.getOnceETL, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          this.checkMessage = res.data.data.items[0]
          this.ETLOid = res.data.data.items[0].oid_array
        })
          .catch(function(error) {
            console.log(error)
          })
      }
    }
  }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .site-containner{
    font-size: 16px;
    color: #25B6C7;
    .seachnav{
      width: 60%;
      height: 50px;
      position: fixed;
      z-index: 2;
      top:0;
      bottom: 0;
      line-height: 55px;
      padding-left: 20px;
      .description{
        font-size: 18px;
        color: #333;
        line-height: 10px;
        padding-left: 10px;
      }
      .returnnormalpress{
        vertical-align: middle;
      }
      .equiplist{
        vertical-align: middle;
        margin-left: 10px;
      }
      .searchinvalid{
        vertical-align: middle;
      }
      .con{
        width: 85%;
        height: 50px;
        float: right;
        margin-right: 20px;
        line-height: 3px;
        padding-left: 0 !important;
        .seachContent{
          font-size:18px;
          font-family:MicrosoftYaHei;
          font-weight:400;
          padding-top: 0px;
          color:rgba(51,51,51,1);
        }
        .seachtitle{
          font-size:12px;
          font-family:MicrosoftYaHei;
          font-weight:400;
          color:rgba(102,102,102,1);
        }
      }
    }
  }
  .outMores{
    height: 40px;
    padding-top: 5px;
  }
  .dataTitles {
    height: 16px;
    font-size: 16px;
    color: #323842;
  }
  .returnIndex {
    float: right;
    font-size: 14px;
    color: #25B6C7;
    cursor: pointer;
  }
  .addBody{
    width: 100%;
    min-height: 500px;
    padding: 0px 20px;
    border: 1px solid #E0E0E0;
    background-color: white;
  }
  /deep/ .textTitle {
    color: #323842;
    font-size: 14px;
    font-weight: bold;
    padding:20px 0px;
    border-bottom: 1px solid #E0E0E0;
  }
  /deep/ .addMessage {
    margin: 20px 0px;
    width: 715px;
  }
  /deep/ .el-form-item {
    margin-bottom: 10px;
    height: 30px;
  }
  /deep/ .el-input__inner {
    height: 30px;
  }
  /deep/ .smallMessage {
    width: 256px;
  }
  /deep/ .VsmallMessage {
    width: 126px;
  }
  /deep/ .bigMessage {
    width: 500px;
  }
  /deep/ .readonlyMessage > input{
    border:none;
  }
  /deep/ .cityMessage {
    width: 624px;
  }
  /deep/ .coordinateMessage {
    width: 624px;
  }
  /deep/ .export {
    background: #fff;
    height: 30px;
    padding: 0px 6px;
    border: 1px solid #0072F3;
    color: #0072F3;
  }
  /deep/ .rightMessage {
    margin-left: 15px;
  }
  /deep/ .el-icon-circle-close-outline:before {
    color: #D05133;
    font-size: 20px;
    font-weight: bold;
  }
  /deep/ .delete {
    display: inline;
    margin-left: 5px;
  }
  /deep/ .clear{
    padding: 6px 16px;
    background-color: #526D89;
    border-color: #526D89 ;
    color: #fff;
    float: right;
    margin-top: 20px;
    margin-left: 10px;
  }
  /deep/ .indieWidth {
    padding: 6px 16px;
    float: right;
    border:1px solid #0072F3;
    background: #0072F3;
    margin-top: 20px;
  }
  /deep/ .el-table--border {
    margin: 20px 0px;
  }
  /deep/ .el-table__header-wrapper {
    height: 40px;
  }
  /deep/ .el-table th {
    padding: 4px 0px;
  }
  /deep/ .el-table td {
    padding: 13px 0px;
    font-weight: normal;
  }
  /deep/ .el-table--border td, .el-table--border th, .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed {
    border-right: 1px solid #E3E3E3;
  }
</style>
